<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt>
                        <p>类型</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>名称</p>
                    </TextIpt>
                </li>

            </ul>
            <div class="btn">
                <BlueBtn>
                    <p>查询</p>
                </BlueBtn>
                <GreenBtn>
                    <p>新增</p>
                </GreenBtn>
            </div>
        </div>
        <div class="table">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="小区民警" name="1">
                    <el-table :data="communityPolice.slice(pages, pages + 4)" border style="width: 100%">
                        <el-table-column prop="Name" label="名称" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="图片" width="180">
                            <template slot-scope="scope">
                                <p @click="lookIMg(scope.row)">查看图片</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Phone" label="联系电话" width="180">
                        </el-table-column>
                        <el-table-column prop="intro" label="简介" width="380">
                        </el-table-column>
                        <el-table-column prop="AddDate" label="添加时间" width="220">
                        </el-table-column>
                        <el-table-column prop="AddMan" label="添加人" width="180">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="editPolice(scope.$index, scope.row)">编辑</el-button>
                                <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button> -->
                                <el-button size="mini" type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page">
                        <div class="total-page">
                            <p>共<span>{{ Math.ceil(communityPolice.length / 4) }}</span>页/<span>{{
                                communityPolice.length
                                    }}</span>条数据
                            </p>
                        </div>
                        <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage"
                            :page-size=4 :current-page.sync=page :total="communityPolice.length" hide-on-single-page>
                        </el-pagination>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="便民电话" name="2" class="convenient">
                    <el-table :data="filterConvenient.slice(pagesItem, pagesItem + 4)" border style="width: 100%">
                        <el-table-column prop="Name" label="名称" width="180">
                        </el-table-column>
                        <el-table-column prop="Phone" label="电话" width="180">
                        </el-table-column>
                        <el-table-column prop="AddMan" label="添加时间">
                        </el-table-column>
                        <el-table-column prop="AddDate" label="添加人">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="phoneEdit(scope.$index, scope.row)">编辑</el-button>
                                <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button> -->
                                <el-button size="mini" type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page">
                        <div class="total-page">
                            <p>共<span>{{ Math.ceil(filterConvenient.length / 4) }}</span>页/<span>{{
                                filterConvenient.length
                                    }}</span>条数据
                            </p>
                        </div>
                        <el-pagination background layout="prev, pager, next,jumper" @current-change="getPages"
                            :page-size=4 :current-page.sync=pageItem :total="filterConvenient.length"
                            hide-on-single-page>
                        </el-pagination>
                    </div>
                </el-collapse-item>

            </el-collapse>
        </div>
        <!-- 点击查看图片弹框 -->
        <el-dialog title="查看图片" :visible.sync="dialogImg" width="30%">
            <div class="dialogImg">
                <img :src="visitorIMg" alt="">
            </div>
        </el-dialog>
        <!-- 点击小区民警编辑 -->
        <el-dialog title="提示" :visible.sync="editDialog" width="30%" :before-close="handleClose" class="editDialog">
            <el-form ref="editForm" :model="editForm" label-width="80px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="intro">
                    <el-input type="textarea" v-model="editForm.intro"></el-input>
                </el-form-item>
                <el-form-item label="照片" class="upload-img" prop="imageUrl">
                    <el-upload class="avatar-uploader" action="http://127.0.0.1/access/updated" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="editForm.imageUrl" :src="editForm.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="editSubmit('editForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击便民电话的编辑 -->
        <el-dialog title="编辑" :visible.sync="phoneDialog" width="20%" :before-close="handleClose" class="editDialog">
            <el-form ref="phoneForm" :model="phoneForm" label-width="80px" :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="phoneForm.name"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="phoneForm.phone"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="phoneConfrim('phoneForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import BlueBtn from '@/components/BlueBtn.vue';
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import GreenBtn from '@/components/GreenBtn.vue';
export default {
    components: {
        BlueBtn,
        SelectIpt,
        TextIpt,
        GreenBtn
    },
    data() {
        return {
            phoneDialog: false,
            editForm: {
                name: '',
                imageUrl: '',
                phone: '',
                intro: "",
                index: '',
                id: "",
            },
            phoneForm: {
                name: '',
                phone: '',
                index: '',
                id: '',
            },
            editDialog: false,
            visitorIMg: '',
            dialogImg: false,
            pageItem: 0,
            pagesItem: 0,
            page: 0,
            pages: 0,
            communityPolice: [],
            filterCommunityPolice: [],
            convenient: [],
            filterConvenient: [],
            activeNames: ['1', '2'],
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                ],
                intro: [
                    { required: true, message: '请输入简介', trigger: 'blur' },
                ],
                imageUrl: [
                    { required: true, message: '请选择照片', trigger: 'blur' },
                ],

            }
        };

    },
    methods: {
        updateConvenient(){
            this.$axios.post('http://127.0.0.1/active/updateConvenient', {
               ...this.phoneForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.phoneDialog = false
            }).catch(err => {
                console.log(err);
            })
        },
        phoneEdit(index, row) {
            this.phoneForm.name = row.Name
            this.phoneForm.phone = row.Phone
            this.phoneDialog = true
            this.phoneForm.index = index + this.pagesItem
            this.phoneForm.id = row.ID
        },
        // 点击便民电话里的确定按钮
        phoneConfrim(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let flag = false
                    if (this.filterConvenient[this.phoneForm.index].Name != this.phoneForm.name) {
                        this.filterConvenient[this.phoneForm.index].Name = this.phoneForm.name
                        flag = true
                    }
                    if(this.filterConvenient[this.phoneForm.index].Phone != this.phoneForm.phone){
                        this.filterConvenient[this.phoneForm.index].Phone = this.phoneForm.phone
                        flag = true
                    }
                    if(flag){
                        this.updateConvenient()
                        return
                    }
                    this.phoneDialog=false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //修改民警信息
        editPoliceInfo() {
            this.$axios.post('http://127.0.0.1/active/editPoliceInfo', {
                ...this.editForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                this.editDialog = false
            }).catch(err => {
                console.log(err);
            })
        },
        //点击对话框里的确定
        editSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let flag = false

                    if (this.communityPolice[this.editForm.index].Name != this.editForm.name) {
                        this.communityPolice[this.editForm.index].Name = this.editForm.name
                        flag = true
                    }
                    if (this.communityPolice[this.editForm.index].Img != this.editForm.imageUrl) {
                        this.communityPolice[this.editForm.index].Img = this.editForm.imageUrl
                        flag = true

                    }
                    if (this.communityPolice[this.editForm.index].Phone != this.editForm.phone) {
                        this.communityPolice[this.editForm.index].Phone = this.editForm.phone
                        flag = true
                    }
                    if (this.communityPolice[this.editForm.index].intro != this.editForm.intro) {
                        this.communityPolice[this.editForm.index].intro = this.editForm.intro
                        flag = true
                    }
                    if (flag) {
                        this.editPoliceInfo()
                        return
                    }
                    this.editDialog = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 点击小区
        editPolice(index, row) {
            this.editForm.name = row.Name
            this.editForm.imageUrl = row.Img
            this.editForm.phone = row.Phone
            this.editForm.intro = row.intro
            this.editForm.id = row.ID
            this.editForm.index = index + this.pages
            this.editDialog = true
        },
        handleClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogImg = false
                    this.phoneDialog = false
                })
                .catch(_ => { });
        },
        handleAvatarSuccess(res, file) {
            this.editForm.imageUrl = "http://127.0.0.1/uploads/" + res.filename
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

        lookIMg(row) {
            this.visitorIMg = row.Img
            this.dialogImg = true
            console.log(row.Img);
        },
        //get 当前页
        getPage(page) {
            this.pages = 4 * (page - 1)
        },
        getPages(page) {
            this.pagesItem = 4 * (page - 1)
        },
        getAllData() {
            this.$axios.get('http://127.0.0.1/active/communitypolice', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.communityPolice = res.data
                this.filterCommunityPolice = res.data
            }).catch(err => {
                console.log(err);
            })
            this.$axios.get('http://127.0.0.1/active/convenient', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.convenient = res.data
                this.filterConvenient = res.data
            }).catch(err => {
                console.log(err);
            })
        },
    },
    mounted() {
        this.getAllData()
    }

}
</script>

<style scoped>
.editDialog>>>textarea {
    width: 280px;
    height: 80px;
}

.editDialog>>>.el-input {
    width: 240px;
}

.upload-img>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.table p {
    color: #3399ff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.dialogImg {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.dialogImg img {
    width: 360px;
    height: 380px;
    object-fit: contain;
}

.table>>>.el-table {
    min-height: 262px;
}

.table>>>.el-collapse-item__content {
    padding-bottom: 5px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top ul {
    display: flex;
    white-space: nowrap;
    font-size: 13px;
    color: #666;
}

.top {
    background: #fff;
    padding: 20px 35px;
    border-radius: 4px;
}

.top li {
    margin-right: 50px;
    margin-bottom: 20px;
}
</style>